<template>
  <div ref="notvip">
    <van-dialog v-model="show" :show-confirm-button="false" style="width: 16.88rem">
      <div class="inner por tac">
        <img class="close poa" src="../images/pop_ico_close.png" @click="show = false">
        <div class="first">该课程为<span class="vip">VIP尊享课程</span></div>
        <div class="sec">开通会员可畅享所有课程服务噢！</div>
        <div class="btn" @click="linkTo">立即开通</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  export default {
    name: "notvip",
    data() {
      return {
        show: true,
      }
    },
    watch: {
      show(val) {
        if (!val) {
          this.$emit('close');
          setTimeout(() => this.$refs.notvip.parentNode.removeChild(this.$refs.notvip), 500);
        }
      },
    },
    methods: {
      linkTo() {
        this.show = false;
        this.$emit('btn-click');
      },
    }
  }
</script>

<style scoped lang="less">
  .inner {
    padding: 7.66rem 1.25rem 1.72rem;
    line-height: 1;
    font-size: .75rem;
    color: #333;
    background: #fff url(../images/pop_ico_vip.png) no-repeat;
    /* 6.13rem 1.84rem*/
    background-position: center 1.84rem;
    background-size: 4.59rem 4.09rem;
    .close {
      top: .63rem;
      right: .63rem;
      width: 1rem;
      height: 1rem;
    }
    .first {
      margin-bottom: .75rem;
      font-size: 1.25rem;
      color: #000015;
      .vip {
        color: #e0b167;
      }
    }
    .btn {
      margin-top: 2.47rem;
      line-height: 2.75rem;
      background-image: linear-gradient(90deg, #e3c18c, #d7aa63), linear-gradient(#c6a47e, #c6a47e);
      border-radius: .19rem;
      color: #fff;
      font-size: 1rem;
    }
  }
</style>
